//获取应用实例
const app = getApp()
const util = require('../../utils/util.js')
let ctx = ""

Page({
  data: {
    clockShow: false,
    rate: 0, // 不同机型rpx与px的换算
    time: "25", 
    mtime: "", //time的毫秒值
    timeStr: "25:00",
    typeActive: "0", //当前选中的种类
    cateArr: [// 选中的任务种类的循环索引
      {
        icon: "a",
        text: "工作"     
      },
      {
        icon: "b",
        text: "学习"     
      },
      {
        icon: "c",
        text: "思考"     
      },
      {
        icon: "d",
        text: "写作"     
      },
      {
        icon: "e",
        text: "运动"     
      },
      {
        icon: "f",
        text: "阅读"     
      }
    ] ,
    okShow: false,
    pauseShow: true,
    continueCancleBtnShow: false,
    timer: null
  },
  onLoad: function() {
    //750rpx
    var res = wx.getSystemInfoSync();
    // 不同机型的rpx与px的换算
    var rate = 750 / res.windowWidth;
    console.log(rate)
    console.log(res)
    this.setData({
      rate: rate
    })
  },
  // 拖动时间条
  sliderChange(e) {
    this.setData({
      time: e.detail.value,
    timeStr: parseInt(e.detail.value) < 10 ?  "0" +e.detail.value + ":00" : e.detail.value + ":00" //倒计时开始的数字
    });
  },
  //点击选择任务种类
  clickType(e) {
    this.setData({
      typeActive: e.currentTarget.dataset.typeindex
    })
  },
 
  
  // canvas画倒计时背景圆
  drawBg(id,start = 0,end = 2) {
    var lineWidth = 6 / this.data.rate; // 6rpx/换算比率 = ？px
    var ctx = wx.createCanvasContext(id);
    ctx.setLineWidth(lineWidth); // 线宽度
    ctx.setStrokeStyle("#D2D2D2"); // 颜色 
    ctx.setLineCap("round");
    ctx.beginPath();
    ctx.arc(
      400/this.data.rate/2,
      400/this.data.rate/2,
      400/this.data.rate/2-2*lineWidth,
      start*Math.PI,
      end*Math.PI);
      ctx.stroke();
      ctx.draw();
      
  },
  // 画外面蓝色的圆
  drawActive() { 
    //定时器
    let _this = this; //在定时器里this指向定时器，所以把页面的this赋值给_this
    var timer = setInterval(function(){
      var angle = 1.5+2*(_this.data.time*60*1000-_this.data.mtime)/(_this.data.time*60*1000)//每次画的角度
      var currentTime =  _this.data.mtime - 100;
      _this.setData({
        mtime: currentTime
      })
      if(angle < 3.5){
        //整秒数时
        //动态设置剩余时间
        if(currentTime % 1000 == 0){
          var timeStr1= currentTime / 1000; //总秒数
          var timeStr2 = parseInt(timeStr1 / 60); //分钟数
          var timeStr3 = (timeStr1 - timeStr2 * 60) >= 10 ? (timeStr1 -
            timeStr2*60) : "0" + (timeStr1 - timeStr2 * 60); //不足一分钟的秒数
          var timeStr4 = timeStr2 >= 10 ? timeStr2 : "0" + timeStr2; //分钟数
          _this.setData({
            timeStr: timeStr4 + ":" + timeStr3
          })
        }
        //动态画白线
        var lineWidth = 6 / _this.data.rate; // 6rpx/换算比率 = ？px
        ctx = wx.createCanvasContext("progressActive");
        ctx.setLineWidth(lineWidth); // 线宽度
        ctx.setStrokeStyle("#4772FA"); // 颜色 
        ctx.setLineCap("round");
        ctx.beginPath();
        ctx.arc(
          400/_this.data.rate/2,
          400/_this.data.rate/2,
          400/_this.data.rate/2-2*lineWidth,
          1.5*Math.PI,
          angle*Math.PI);
          ctx.stroke();
          ctx.draw();
      } else {
        //记录完成的任务信息
        var logss = wx.getStorageSync('logss') || []; 
        // 第一次取值要判断有没有数据
        logss.unshift({
          date: util.formatTime(new Date), // 日期//until.js里的工具类
          cate: _this.data.typeActive, //类型
          time: _this.data.time // 时长
        });
        wx.setStorageSync('logss',logss);
        console.log("logss2---->",logss)
        _this.setData({
          timeStr: "00:00",
          pauseShow: false,
          okShow: true

        })
        //清除定时器
        clearInterval(timer);
      }
    },100)
    //保存定时器
    this.setData({
      timer: timer
    })

  },

// 清除画板
clearCanvas: function () {
  // 清除区域
  ctx.clearRect(0, 0, 400, 400);
  ctx.draw(true);
},

   // 点击开始专注
   start() {
    this.setData({
    clockShow: true,
    mtime:this.data.time *60*1000, //刷新拖动后时间的毫秒单位
    timeStr: this.data.time < 10 ? "0"+ this.data.time + ":00" : this.data.time + ":00"
    });
    clearInterval(this.data.timer);
    if(ctx) {
      this.clearCanvas();
    }
    this.drawBg("progressBg");
    this.drawActive()
  },

  //点击暂停按钮
  pause (){
    //清除定时器
    clearInterval(this.data.timer);
    this.setData({
      pauseShow: false,
      continueCancleBtnShow: true,
      okShow: false
    });
  },

  // 点击继续按钮
  continue() {
    this.setData({
      pauseShow: true,
      continueCancleBtnShow: false,
      okShow: false
    });
    clearInterval(this.data.timer);
    this.drawActive();
  },

  //点击放弃
  cancle() {
    clearInterval(this.data.timer);
    
    // this.drawBg("progressActive", 1.5, 1.5);
    
  
    this.setData({
      timeStr: this.data.time < 10 ? "0"+ this.data.time + ":00" : this.data.time + ":00",
      pauseShow: true,
      continueCancleBtnShow: false,
      clockShow: false,
      okShow: false
    });

  },
  // 点击返回
  ok() {
    this.drawBg("progressActive", 1.5, 1.5);
    this.setData({   
      timeStr: this.data.time < 10 ? "0"+ this.data.time + ":00" : this.data.time + ":00",
      clockShow: false,
      okShow: false,
      pauseShow: true
    });
  },

  onShareAppMessage: function () {
    return{
        title:'',
        path:'/pages/index/index',
        imageUrl:'/images/icon.png',
        success:(res)=>{
          
        }
    }
  }
})